<template>
  <div class="make">
    <Ruler :isRuler="isRuler" @closeRuler="chosePanel"/>
    <Prize :prize="prize" v-if="isPrize"/>
    <div
      class="share panel animated"
      :class="isShare?'slideInDown':'slideLOutUp'"
      v-if="isShare"
      @click.passive.stop="isShare=0"
    >
      <img :src="shareImg" alt>
    </div>
    <div class="gift panel" v-if="0!=isGift">
      <p>恭喜您已集齐6种食材</p>
      <p class="title">沃妹送你一个新年礼盒</p>
      <p class="title">点击礼盒领取好礼</p>
      <img
        :src="opengift"
        v-if="1==isopen"
        class="animated"
        :class="isopen?'bounceIn':'bounceOut'"
        @click.passive="openGiftFunc"
        alt
      >
      <img
        :src="gift"
        v-if="2==isopen"
        class="animated opendGift"
        :class="2==isopen?'bounceIn':'bounceOut'"
        alt
      >
    </div>
    <span class="ruler" @click.passive.stop="showRuler"></span>
    <span class="backHome" @click.passive.stop.once="backHome"></span>
    <header class="hanyichu">
      <div>
        制作一份
        <span>{{foodName}}</span>
      </div>
      <div>需要以下食材</div>
    </header>
    <nav>
      <img :src="foodImg" class="animated bounceIn" alt>
    </nav>
    <aside>
      <span class="hanyichu">邀请小伙伴助你解锁食材</span>
    </aside>
    <ul class="food-sucai">
      <li v-for="(items,index) of needFoods " :key="index">
        <img :src="items.hasMaterial?items.materialImgUrl:items.materialImgHuiUrl" alt srcset>
        <span class="add" @click.passive.stop="sucaiShare(items.code)" v-if="!items.hasMaterial"></span>
      </li>
    </ul>
    <footer></footer>
  </div>
</template>
<script>
import Ruler from '@/components/Ruler'
import Prize from '@/components/Prize'
import ruler from '@/mixins/ruler'
import { checkMyFood, drawLottery, queryPrize, checkUser } from '@/axios/api'
import { mainShare } from '@/assets/js/helpshare'
export default {
  data() {
    return {
      prize: {},
      isopen: 0,
      isGift: 0,
      isShare: 0,
      isPrize: 0,
      user: {},
      foodName: '',
      shareImg: require('@/assets/images/zhuli.png'),
      gift: require('@/assets/images/get-gift.png'),
      opengift: require('@/assets/images/open-gift.png'),
      foodImg: '',
      needFoods: []
    }
  },
  components: { Ruler, Prize },
  mixins: [ruler],
  created() {


    Promise.all([queryPrize(), checkMyFood()]).then(response => {
      let [prize, food] = [...response];
      console.log(prize, food);
      this.needFoods = food.res;
      let hasMaterial = 0;
      if (true === prize.res.hasPrize) {
        this.isGift = 0;
        this.prize = prize.res.prize;
        this.isPrize = 1;
      } else {
        this.needFoods.map(items => {
          hasMaterial += items.hasMaterial;
        })
        if (6 === hasMaterial) {
          this.isGift = 1;
          this.isopen = 1;
        } else {
          this.isGift = 0;
        }
      }
    })
  },
  mounted() {
    //   appid, title, descT, desc, link, imgUrl
    checkUser().then(rs => {
      this.user = rs.res.food;
      console.log('user', this.user);
      this.foodImg = this.user.foodImgUrl;
      this.foodName = this.user.foodName;
    })
  },
  methods: {
    //打开奖品盒子
    openGiftFunc() {
      this.isopen = 2;
      setTimeout(() => {
        this.drawLotteryFunc()
      }, 1000)

    },
    drawLotteryFunc() {
      drawLottery().then(rs => {
        if ('200' == rs.code) {
          this.isopen = 0;
          this.isGift = 0;
          this.prize = rs.res;
          this.prize['status'] = 0;
          this.prize['prizeType'] = this.prize.type;
          this.isPrize = 1;
        } else {
          layer.open({
            content: rs.msg,
            skin: 'msg',
            time: 2 //2秒后自动关闭
          })
        }
      })
    },
    sucaiShare(e) {
      mainShare(this.user.userCode, e)
      this.isShare = 1;
    },
    backHome() {
      this.$router.push({ path: '/', query: {} })
    }

  }

}
</script>
<style lang="less" scoped>
.share {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  img {
    width: 156px;
  }
}

.gift {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  p {
    align-self: center;
    font-size: 44px;
    color: #fff714;
    line-height: 1.5em;
  }
  .title {
    align-self: center;
    color: #fff;
    font-size: 36px;
    text-shadow: 0 5px 5px #e71b41;
  }
  img {
    margin: 30px auto;
    width: 300px;
  }
  .opendGift {
    width: 400px;
  }
}
.make {
  position: relative;
  width: 640px;
  height: 100%;
  background: linear-gradient(to top, #ef2a2c, #fc3e61);
  .ruler {
    position: absolute;
    top: 100px;
    right: 0;
    display: inline-block;
    width: 66px;
    height: 144px;
    background: url("../assets/images/make-ruler.png") no-repeat 10px 0;
    background-size: 66px 144px;
  }
  .backHome {
    position: absolute;
    top: 100px;
    left: 0;
    display: inline-block;
    width: 59px;
    height: 149px;
    background: url("../assets/images/back-home.png") no-repeat;
    background-size: 59px 149px;
  }
  header {
    padding-top: 73px;
    width: 639px;
    height: 210px;
    background: url("../assets/images/make-title.png") no-repeat;
    background-size: 639px 210px;
    > div {
      line-height: 1.5em;
      text-align: center;
      font-size: 42px;
      color: #ffffff;
      span {
        color: #fff229;
      }
    }
  }
  nav {
    margin-top: 120px;
    width: 100%;
    height: 140px;
    border-bottom: 15px solid #c71121;
    background: linear-gradient(to top, #fedba4, #f1bc6f);
    text-align: center;
    img {
      position: relative;
      top: -90px;
      width: 273px;
    }
  }
  aside {
    margin: 15px auto;
    display: flex;
    justify-content: center;
    span {
      padding: 10px 20px;
      background: #da3240;
      border-radius: 15px;
      color: #efe298;
      font-size: 28px;
    }
  }
  .food-sucai {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    li {
      margin: 15px 20px;
      width: 142px;
      height: 142px;
      background: #f6f1d9;
      border-radius: 15px;
      position: relative;
      img {
        position: absolute;
        z-index: 333;
        padding: 10px;
        width: 100%;
      }
      .add {
        position: absolute;
        z-index: 666;
        width: 100%;
        height: 100%;
        background: url("../assets/images/add.png") no-repeat center center;
        background-size: 50% 50%;
      }
    }
  }
  footer {
    position: fixed;
    bottom: 0;
    z-index: 333;
    width: 640px;
    height: 65px;
    background: url("../assets/images/flow.png") no-repeat;
    background-size: 640px 65px;
  }
}
</style>
